<template>
  <div class="tools" v-if="isMeunId === 3">
    <ul>
      <li
        :class="isActive == item.id ? 'active' : ''"
        v-for="item in dataList"
        :key="item.id"
        @click="toChange(item.id)"
      >
        <img :src="item.img" alt="" />
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isActive: 1,
      isMeunId:'',
      dataList: [
        {
          id: 1,
          img: require("@/assets/3d_icon/edit/tools/tool_1.png"),
        },
        {
          id: 2,
          img: require("@/assets/3d_icon/edit/tools/tool_2.png"),
        },
        {
          id: 3,
          img: require("@/assets/3d_icon/edit/tools/tool_3.png"),
        },
        {
          id: 4,
          img: require("@/assets/3d_icon/edit/tools/tool_4.png"),
        },
        {
          id: 5,
          img: require("@/assets/3d_icon/edit/tools/tool_5.png"),
        },
        {
          id: 6,
          img: require("@/assets/3d_icon/edit/tools/tool_6.png"),
        },
        {
          id: 7,
          img: require("@/assets/3d_icon/edit/tools/tool_7.png"),
        },
      ],
    };
  },
  created(){
    this.$bus.$on('meunId',val=>{
        // console.log("val===",val);
        this.isMeunId = val.id;
        
    });
   },
  methods:{
    toChange(id){
        this.isActive = id;
    }
  }
};
</script>
<style lang="scss" scoped>
.tools {
  position: absolute;
  width: 56px;
  height: 368px;
  background-color: rgba(62, 69, 81,0.8);
  top: 80px;
  right: 360px;
//   opacity: 0.8;
  border-radius: 4px;
  ul {
    box-sizing: border-box;
    height: 368px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    li {
      // display: block;
      width: 48px;
      height: 48px;
      border-radius: 4px;
      line-height: 48px;
      img {
        width: 28px;
        height: 28px;
      }
    }
    .active {
      background: #202735;
    }
   
  }

}
</style>
